import React,{PureComponent} from "react"
import {isNull,filterExp,filterTemplate} from "../../utils/helper"
import MIcon from "../MIcon"
export  default  class MiFulltext extends PureComponent{
	constructor(props){
		super(props);
		this.state={
			
		}
	}
	renderImg=()=>{
		// 没有配置 或者url为空时 就不显示
		let {img,formData}=this.props;
		if(isNull(img)){
			return null
		}
		else{
			let {size=60,url="",radius=0,html}=img||{};
			url = filterExp(url,formData);
			if(isNull(url)){
				if(isNull(html)){
					return null
				}
				else{
					html = filterTemplate(html,formData);
					return <div dangerouslySetInnerHTML={{__html:html}}></div>
				}
			}
			else{
				return (
					<div style={{marginRight:"5px",width:size+"px",height:size+"px"}} >
						<img style={{width:size+"px",height:size+"px",borderRadius:radius+"%"}} src={url} alt="" />
					</div>
				)
			}
		}
	};
	renderText=(item)=>{
		let {formData}=this.props;
		if(isNull(item)){
			return null
		}
		else{
			let {text,text_size=14,text_color,align="left",text_line=1,icon}=item||{};
			text=filterExp(text,formData)
			if(isNull(text)){
				return null
			}
			else{
				let renderStyle={
					margin:"2px 0",
					fontSize:text_size+"px",
					color:text_color,
					textAlign:align
				};
				let renderClass = "ellipsis";
				renderClass+=text_line;
				return (
					<div data-flex="dir:left cross:center"  style={renderStyle}>
						{this.renderIcon(icon)}
						<div className={renderClass}>
							{text}
						</div>
					</div>
				)
			}
		}
	};
	renderIcon=(icon)=>{
		let {formData}=this.props;
		if(isNull(icon)){
			return null
		}
		else{
			let {text,text_color,text_size=14}=icon||{};
			text=filterExp(text,formData)
			if(isNull(text)){
				return null
			}
			else{
				let renderStyle={
					color:text_color,
					fontSize:text_size+"px"
				};
				return (
					<MIcon style={renderStyle} type={text} size={text_size} color={text_color}/>
				)
			}
		}
	};
	render(){
		let {img={},title={},remark={},desc={}}=this.props;
		let k=0;
		let wrapperFlex="dir:left cross:center";
		if(!isNull(img)){
			wrapperFlex+=" box:first"
		}
		return (
			<div key={k} data-flex={wrapperFlex}  style={{padding:"10px"}}>
				{this.renderImg()}
				<div>
					{this.renderText(title)}
					{this.renderText(remark)}
					{this.renderText(desc)}
				</div>
			</div>
		)
	}
}
	